<template>
    <div style="background-color: #E4E7ED">
        <div style="padding-left:200px;padding-top:50px;padding-right:200px">
            <el-row style="padding-right:200px">
                <el-col :span="8">
                    <div class="demo-image" style="padding-left:50%">
                        <img src="@/assets/warren_market.png" style="width: 240px; height: 180px">
                    </div>
                </el-col>
                <el-col :span="8" style="padding-top:4%">
                    <div class="demo-input-suffix" style="padding-left:50px">
                        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input" style="width:600px">
                            <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button> <!--将文本内容输出到data里的input中 这个button绑定方法获取input数据进行axios-->
                        </el-input>
                    </div>
                </el-col>
            </el-row >
            <el-row :gutter="20" style="background-color:#FFFFFF">
                <el-col :span="6" v-for="product in tableData" :key="product" style="padding-left:50px">
                    <div class="grid-content bg-purple" style="padding-top:20px">
                        <router-link :to="'/detail?category='+product.category+'&id='+product.id" style="color:black">
                            <img :src="require('@/assets/'+product.category+'/'+product.id+'/1.jpg')" style="width: 200px; height: 200px"><br>
                            <p style="width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px">{{product.title}}</p>
                            <el-row :gutter="20" style="padding-top:10px">
                                <el-col :span="6"><div class="grid-content bg-purple"><p style="color:#D69C1F">￥{{product.price}}</p></div></el-col>
                                <el-col :span="18"><div class="grid-content bg-purple"><p style="padding-left:10px">{{product.buyer}}人购买</p></div></el-col>
                            </el-row>
                        </router-link>
                    </div>
                </el-col>
            </el-row>
                <div class="block" style="padding-top:20px;padding-left:860px">
                    <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total=total>
                    </el-pagination>
                </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"brandpage",
     data(){
         return{
             input: '',
             tableData: [],
             total : 100
         }
     },
     methods: {
      handleCurrentChange(val) {
        this.$axios.get("/api/getShowProduct?brand="+this.$route.query.brand+"&category="+this.$route.query.category+"&page="+val).then(res=>{
            this.tableData = res.data
        });
      },
      handleClick() {
        this.$router.push("/productsshow?title="+this.input)
      }
    },
    mounted(){
        this.$axios.get("/api/getShowProduct?brand="+this.$route.query.brand+"&category="+this.$route.query.category+"&page=1").then(res=>{
            this.tableData = res.data
        });
        this.$axios.get("/api/getCountProduct?brand="+this.$route.query.brand+"&category="+this.$route.query.category).then(res=>{
            this.total = res.data
        });
    }
}
</script>

<style>
    a{
        text-decoration: none;
    }
    .router-link{
        text-decoration: none;  
    }
</style>